<script setup>
import { reactive, ref,onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
// import { adminStore, tokenStore } from '../store/store.js';

import loginApi from '../api/login_api.js'

const obj=ref({});

const addWinVisible=ref(false);

const addCancel = () => {
  obj.value={};//清空数据
  addWinVisible.value=false; //关闭对话框
}

const addCommit = async () => {
  // 添加基本验证
  if (!obj.value.user_account || !obj.value.user_password) {
    ElMessage.error('账号和密码不能为空');
    return;
  }

  try {
    await loginApi.add(obj.value);
    ElMessage.success('注册成功');
    // search();//重新加载数据
    addWinVisible.value = false;//关闭对话框
  } catch (error) {
    // 根据错误信息判断是否为账号重复错误
    const errorMsg = error.message || '未知错误';
    if (errorMsg.includes('已存在') || errorMsg.includes('duplicate') || errorMsg.includes('唯一')) {
      ElMessage.error('该账号已存在，请选择其他账号');
    } else {
      ElMessage.error('注册失败: ' + errorMsg);
    }
  }
}

const handlerAdd = async () => {
  obj.value={};
  addWinVisible.value=true;
}

const user = ref({
  user_account: '',
  user_password: '',
  captcha: '',
  key: ''
});
onMounted(function(){
  localStorage.removeItem("token")
  // 加载验证码
  loadCaptcha();
})

// 获取路由对象
const router = useRouter();

// 验证码图片数据
const captcha = ref("");

const onSubmit = async () => {
  const res = await loginApi.login(user.value);
  if(res){
    localStorage.setItem('token',res);
    // 跳转
    router.push('/');
  }else{
    ElMessage.error('登录失败');
    // 加载验证码
    loadCaptcha();
  }
}

// 加载验证码
const loadCaptcha=async ()=>{
    const res=await loginApi.captcha();
    user.value.key=res.key;
    captcha.value=res.base;
}

</script>


<template>
  <div class="login-bg">
    <el-form class="form-login" :model="user">
      <el-row>
        <el-col :span="10">
          <img style="width: 100px" src="@/assets/logo1.jpg" alt="黄金屋" />
        </el-col>
        <el-col :span="14">
          <h1>系统登录</h1>
        </el-col>
      </el-row>
      <el-form-item>
        <el-input v-model="user.user_account"
                  placeholder="请输入用户账号"
                  :prefix-icon="User"
                  maxlength="16"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.user_password"
                  placeholder="请输入密码"
                  show-password
                  :prefix-icon="Lock"
                  maxlength="50"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.captcha"
                  placeholder="验证码"
                  :prefix-icon="Key"
                  maxlength="5"
                  class="input-verCode"></el-input>
        <img :src="captcha"
             class="img-verCode" @click="loadCaptcha" alt="123">
      </el-form-item>
      <el-from :inline="true">
      <el-form-item>
        <el-button class="btn-login" type="success" @click="onSubmit">登录</el-button>
      </el-form-item>
        <el-form-item>
        <el-button class="btn-login" type="success" @click="handlerAdd">注册</el-button>
      </el-form-item>
      </el-from>
    </el-form>
  </div>

  <el-dialog  v-model="addWinVisible" title="用户注册" width="500">
    <el-form :model="obj">
      <el-form-item label="用户账号" :label-width="100">
        <el-input v-model="obj.user_account"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户昵称" :label-width="100">
        <el-input v-model="obj.user_name"  autocomplete="off" />
      </el-form-item>
      <el-form-item  label="用户密码" :label-width="100">
        <el-input show-password v-model="obj.user_password"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户邮箱" :label-width="100">
        <el-input v-model="obj.user_email"  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">
          注册
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

.login-bg{
  height: 100%;
  background-image: url('../assets/logo1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.form-login{
  width: 280px;
  padding: 20px;
  position: absolute;
  top: 20%;
  left: calc(50% - 150px);
  background-color: #FFF;
  box-shadow: 10px 10px 30px #000;
}

.btn-login{
  width: 100%;
}
h1{
  text-align: center;
  font-size: 24px;
  margin-bottom: 18px;
  height: 50px;
  line-height: 50px;
}
.input-verCode{
  width: 160px;
}
.img-verCode{
  width: 80px;
  height:30px;
}
</style>